var arr = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg']
var index = 0;
var z = 999999;
boom();

function boom() {
    var x = 16;
    var y = 6;
    var oBox = document.getElementById('box');
    var oParentDiv = document.createElement('div');
    z--;
    oParentDiv.style.zIndex = z;
    oBox.appendChild(oParentDiv);
    for (var i = 0; i < y; i++) {
        for (var j = 0; j < x; j++) {
            var oDiv = document.createElement('div');
            oDiv.style.width = oParentDiv.clientWidth / x + 'px';
            oDiv.style.height = oParentDiv.clientHeight / y + 'px';
            oDiv.style.left = (oParentDiv.clientWidth / x) * j + 'px';
            oDiv.style.top = (oParentDiv.clientHeight / y) * i + 'px';
            oDiv.style.background = 'url(' + arr[index] + ')';
            oDiv.style.backgroundPositionX = (oParentDiv.clientWidth / x) * -j + 'px';
            oDiv.style.backgroundPositionY = (oParentDiv.clientHeight / y) * -i + 'px';
            oDiv.style.transition = Math.random() * 1 + 0.5 + 's';
            oParentDiv.appendChild(oDiv);
        }
    }
    var allDiv = oParentDiv.children;
    setTimeout(function() {
        index++;
        if (index == arr.length) {
            index = 0;
        }
        boom();
        for (var i = 0; i < allDiv.length; i++) {
            allDiv[i].style.transform = 'perspective(800px) rotateX(' + (Math.random() * 360 - 180) + 'deg) rotateY(' + (Math.random() * 360 - 180) + 'deg) translateX(' + (Math.random() * 100 - 50) + 'px) translateY(' + (Math.random() * 100 - 50) + 'px) translateZ(' + (Math.random() * 100 + 50) + 'px)';
            allDiv[i].style.opacity = 0;
        }
    }, 1000)
    setTimeout(function() {
        oBox.removeChild(oParentDiv);
    }, 2000)
}